<template>
  <div class="">
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50"
        >
      </el-table-column>
      <el-table-column
        prop="titlePicture"
        header-align="center"
        align="center"
        label="图片">
        <template slot-scope="scope">
          <img style="width:50px;height:50px;" :src="scope.row.titlePicture" alt="">
        </template>
      </el-table-column>
      <el-table-column
        prop="buyerNickname"
        header-align="center"
        align="center"
        label="买手昵称">
      </el-table-column>
      <el-table-column
        prop="buyerPhone"
        header-align="center"
        align="center"
        label="买手电话">
      </el-table-column>
      <el-table-column
        prop="title"
        header-align="center"
        align="center"
        label="标题">
      </el-table-column>
       <el-table-column
        prop="brandName"
        header-align="center"
        align="center"
        label="品牌">
      </el-table-column>
       <el-table-column
        prop="categoryName"
        header-align="center"
        align="center"
        label="分类">
      </el-table-column>
       <el-table-column
        prop="sku"
        header-align="center"
        align="center"
        label="sku">
      </el-table-column>
      <el-table-column
        prop="color"
        header-align="center"
        align="center"
        label="颜色">
      </el-table-column>
      <el-table-column
        prop="size"
        header-align="center"
        align="center"
        label="尺寸">
      </el-table-column>
      <el-table-column
        prop="number"
        header-align="center"
        align="center"
        label="数量">
      </el-table-column>
      <el-table-column
        prop="totalPrice"
        header-align="center"
        align="center"
        label="总额">
      </el-table-column>
      <el-table-column
        prop="unitPrice"
        header-align="center"
        align="center"
        label="单价">
      </el-table-column>
      <el-table-column
        prop="unitDiscountPrice"
        header-align="center"
        align="center"
        label="单个优惠">
      </el-table-column>
      <el-table-column
        prop="eurPrice"
        header-align="center"
        align="center"
        label="欧洲价">
      </el-table-column>
      <el-table-column
        prop="discount"
        header-align="center"
        align="center"
        label="折扣">
      </el-table-column>
      <el-table-column
        fixed="right"
        prop="action"
        header-align="center"
        align="center"
        label="操作">
        <template slot-scope="scope">
          <div>
            <!-- <a v-if="getRouteAction('state')==0" size="small" type="primary" style="cursor: pointer;" @click="visible = true">点击上传凭证</a> -->
            <template v-if="getRouteAction('state')==2 || getRouteAction('state')==9 || getRouteAction('state')==10">
              <template v-if="scope.row.receiptFlag==null">
                <a size="small" type="primary" style="cursor: pointer;" @click="openUpload(scope,1)">上传购买凭证</a>
              </template>
              <template v-else-if="scope.row.packFlag==null">
                <a size="small" type="primary" style="cursor: pointer;" @click="openUpload(scope,2)">上传打包信息</a>
              </template>
              <template v-else-if="scope.row.logisticsFlag==null">
                <a size="small" type="primary" style="cursor: pointer;" @click="msgVisible = true;orderItemId=scope.row.id;">填写物流单号</a>
              </template>
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>
      <el-dialog
        title=""
        :close-on-click-modal="false"
        width="400px"
        :visible.sync="visible">
        <el-form label-width="80px">
          <el-form-item v-if="uploadNameShow=='购买凭证'" label="小票单号">
            <el-input v-model="docketNumber" placeholder="请输入小票单号"></el-input>
          </el-form-item>
          <el-form-item :label="uploadNameShow">
            <el-upload
              class="upload-demo"
              :action="action"
              :on-preview="detailImgPreview"
              :data="{'module_type':'orderInfo'}"
              :on-remove="detailImgRemove"
              :file-list="detailImgList"
              :on-success="detailImgSuccess"
              list-type="picture">
              <a size="small" type="primary">点击上传图片</a>
            </el-upload>            
          </el-form-item>
          <el-button style="margin-top:10px;" size="small" type="primary" @click="comfirmImgList">确认</el-button>
        </el-form>
      </el-dialog>
      <el-dialog
        title=""
        :close-on-click-modal="false"
        width="400px"
        :visible.sync="msgVisible">
        <el-form ref="form" label-width="80px">
          <el-form-item label="物流公司">
            <el-select v-model="company" placeholder="请选择物流公司">
              <el-option v-for="item in companyList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="物流单号">
              <el-input style="width:200px;" v-model="waybillNumber" placeholder="请输入物流单号" ></el-input>
          </el-form-item>
          <el-button style="margin-right:10px;" size="small" type="primary" @click="comfirmLogistic">确认</el-button>
        </el-form>
      </el-dialog>
    <upload v-if="true" ref="upload" @refreshDataList="getDataList"></upload>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from "./orders-add-or-update";
import Upload from "./order-upload";

export default {
  components: {
    AddOrUpdate,
    Upload,
  },
  data() {
    return {
      dataForm: {
        key: ""
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      orderNo: "",
      uploadVisible: false,
      action:this.$http.adornUrl(`/biz/upload/upimgSingle?token=${this.$cookie.get('token')}`),
      detailImgList: [],
      visible:false,
      msgVisible:false,
      type:0,
      orderItemId:0,
      companyList:[],
      company:"",
      waybillNumber:"",
      uploadNameShow:"",
      docketNumber:""
    };
  },
  computed: {},
  mounted(){
    this.getCompanyList()
  },
  activated() {
    this.getDataList();
  },
  methods: {
    comfirmLogistic(){
      if (this.company=="") {
        this.$message({message:'请选择物流公司',type:'warning'});
        return;
      }
      if (this.waybillNumber=="") {
        this.$message({message:'请填写物流单号',type:'warning'});
        return;
      }
      this.$http({
        url: this.$http.adornUrl("/biz/orders/addLogisticsWaybillNumber"),
        method: "post",
        params: this.$http.adornParams({
          orderItemId: this.orderItemId,//
          freightId:this.company,//images
          waybillNumber:this.waybillNumber
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({message:'提交成功',type:'success'});
          this.getDataList();
          this.msgVisible=false;
        }else{
          this.$message.error('提交失败');
        }
      });
    },
    getCompanyList(){
        this.$http({
          url: this.$http.adornUrl("/biz/freightcompany/list"),
          method: "get"
        }).then(({ data }) => {
        if (data && data.code === 0) {
          data.list.map((val)=>{
            val['label']=val.company;
            val['value']=val.id;
          })
          for (var i = 0;i < data.list.length;i++) {
            if (data.list[i].companycode != "") {
              this.companyList.push(data.list[i]);
            }
          }
        }
        this.dataListLoading = false;
      });
    },
      openUpload(scope,type){
        if (type == 1) {
          this.uploadNameShow = "购买凭证";
        } else if (type == 2) {
          this.uploadNameShow = "出库照片";
        }
        this.visible=true;
        this.type=type;
        this.orderItemId=scope.row.id
      },
      comfirmImgList(){
        if (this.detailImgList==false) {
          this.$message({message:'您还没有上传图片',type:'warning'});
          return;
        }
        let images = this.detailImgList.map(val=>val.url)
        this.$http({
          url: this.$http.adornUrl("/biz/orders/addOrderRecord"),
          method: "post",
          params: this.$http.adornParams({
            orderItemId: this.orderItemId,//
            images:images.join(","),//images
            type:this.type,
            docketNumber:this.docketNumber
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({message:'提交成功',type:'success'});
            this.getDataList();
            this.visible=false;
          }else{
            this.$message.error('提交失败');
          }
          this.detailImgList = [];
        });
      },
      detailImgRemove(file, fileList) {
        this.detailImgList = fileList;
      },
      detailImgPreview(file) {
        console.log(file);
      },
      detailImgSuccess(response, file, fileList){
        var obj = {};
        obj.url = response.url;
        this.detailImgList.push(obj);
      },
    returnStateNumToZH(stateNum) {
      if (stateNum == 0) {
        return "下单";
      }
      if (stateNum == 1) {
        return "填完收货地址和密语，等待付款";
      }
      if (stateNum == 2) {
        return "已付款，待发货";
      }
      if (stateNum == 3) {
        return "原状态买手完善信息";
      }
      if (stateNum == 9) {
        return "上传购买凭证";
      }
      if (stateNum == 10) {
        return "上传打包信息";
      }
      if (stateNum == 4) {
        return "已发货，待收货";
      }
      if (stateNum == 5) {
        return "确认收货，待评价";
      }
      if (stateNum == 6) {
        return "买手已评价客人没有评价";
      }
      if (stateNum == 7) {
        return "客人评价买手没有评价";
      }
      if (stateNum == 8) {
        return "订单完成";
      }
      if (stateNum == 11) {
        return "交易关闭（由于缺货导致）";
      }
      if (stateNum == -1) {
        return "客人取消订单";
      }
    },
    getRouteAction(action) {
      if (window.location.href.split(action + "=")[1]) {
        return window.location.href.split(action + "=")[1].split("&")[0];
      }
      return false;
    },
    // 上传文件
    uploadHandle() {
      this.uploadVisible = true;
      this.$nextTick(() => {
        this.$refs.upload.init();
      });
    },
    // 获取数据列表
    getDataList() {
      console.log("------------------");
      console.log(this.getRouteAction("state"));
      this.dataListLoading = true;
      var startTime;
      var endTime;
      if (this.time) {
        startTime = this.time[0];
        endTime = this.time[1];
      }
      this.$http({
        url: this.$http.adornUrl("/biz/orders/orderItem"),
        method: "get",
        params: this.$http.adornParams({
          orderNo: this.getRouteAction("orderNo")
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.items;
        } else {
          this.dataList = [];
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 删除
    deleteHandle(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
            return item.id;
          });
      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl("/biz/orders/delete"),
          method: "post",
          data: this.$http.adornData(ids, false)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    }
  }
};
</script>
<style>
</style>
